<template>
    <div id="calendar"></div>
</template>

<script>
import * as echarts from 'echarts';
import moment from 'moment';

export default {
    name: 'Calendar',
    props: ['dataList'],

    data() {
        return {

        };
    },
    watch: {
        dataList: {
            handler(dataList) {
                this.getData(dataList)
                this.initCalendar()
            },
            deep: true
        }
    },

    mounted() {
        this.initCalendar()
    },


    methods: {
        moment,
        initCalendar() {
            let chartDom = document.getElementById('calendar');
            let myChart = echarts.init(chartDom);
            let option;
            option = {
                title: {
                    top: 10,
                    left: 'left',
                    text: '倒计分钟量（仅含已完成）',
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: 16,
                    }
                },
                tooltip: {},
                visualMap: {
                    pieces: [
                        { min: 450.01 },
                        { min: 300.01, max: 450 },
                        { min: 150.01, max: 300 },
                        { min: 0.01, max: 150 },
                        { max: 0.01 }
                    ],
                    type: 'piecewise',
                    orient: 'horizontal',
                    left: 'right',
                    bottom: 25,
                    target: {
                        inRange: {
                            color: ['#f1f1f1', '#caeeb9','#7ad186', '#0aa96f', '#07794f']
                        },
                    },
                    controller: {
                        inRange: {
                            color: ['#f1f1f1', '#caeeb9', '#7ad186', '#0aa96f', '#07794f']
                        },
                    },
                },
                calendar: {
                    top: 70,
                    left: 30,
                    // right: 30,
                    cellSize: ['auto', 14],
                    range: [moment().subtract(1, 'years').format('YYYY-MM-DD'), moment().add(1, 'days').format('YYYY-MM-DD')],
                    itemStyle: {
                        borderWidth: 1,
                        borderColor: '#fff',
                        // color: "#f1f1f1",
                    },
                    yearLabel: { show: false },
                    monthLabel: { color: '#555' },
                    dayLabel: { color: '#555' },
                    splitLine: {
                        lineStyle: { color: '#d7d7d7' }
                    }
                },
                series: {
                    type: 'heatmap',
                    coordinateSystem: 'calendar',
                    data: this.getData(),
                },

            };

            option && myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },
        getData() {
            // 起始和结束的年月日
            let startStr = moment().subtract(1, 'years').format('YYYY-MM-DD');
            let endStr = moment().add(1, 'days').format('YYYY-MM-DD');
            // 将起始和结束的年月日转为echarts数
            var date = +echarts.number.parseDate(startStr);
            var end = +echarts.number.parseDate(endStr);
            var dayTime = 3600 * 24 * 1000;
            var data = [];
            for (var time = date; time < end; time += dayTime) {
                // 求每天数据
                let dayData = 0
                this.dataList.map(item => {
                    if (item.isAchieve == 'true') {
                        let curStr = moment(item.saveTime).format('YYYY-MM-DD')
                        if (+echarts.number.parseDate(curStr) == +echarts.number.parseDate(time)) {
                            let arr = item.settingTime.split(' : ')
                            dayData = Math.ceil((arr[0] * 60 + arr[1] * 1 + arr[2] / 60) * 100) / 100
                        }
                    }
                })
                data.push([
                    echarts.format.formatTime('yyyy-MM-dd', time),
                    dayData
                ]);
            }
            return data;
        }
    },
};
</script>

<style lang="less" scoped>
#calendar {
    height: 43vh;
    padding: 15px;
}
</style>